<template>
    <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
        <div class="g-content-title">菜单管理</div>
        <div style="margin:10px 30px;">
            <el-tabs v-model="selectRoleId" @tab-click="roleChangeHandler">
                <el-tab-pane v-for="item in roleList" :key="item.roleId" :name="item.roleId.toString()"
                             :label="item.roleName"></el-tab-pane>
            </el-tabs>
        </div>
        <div style="margin:10px 30px;">
            <div>
                <el-transfer class="transfer-style" v-model="roleMenuIds"
                             :data="allMenuList"
                             :titles="['待选画面', '选中画面']">
                    <el-button class="transfer-footer" slot="right-footer" size="small" @click="saveMenu">保存</el-button>
                </el-transfer>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      roleList: [], // 所有的角色
      allMenuList: [], // 所有的菜单
      roleMenuIds: [], // 所选角色的菜单
      gHeight: this.$store.state.gHeight,
      selectRoleId: 0
    }
  },
  methods: {
    // 获得全部角色
    getRoleList: function () {
      let url = this.$base.getUrl('getUserRoles')
      let params = {
        url: url,
        data: {}
      }
      this.$store.dispatch('getForm', params).then(res => {
        if (res) {
          res.forEach((obj) => {
            // 排除保安队长和保安
            if (obj.roleId !== 4 & obj.roleId !== 5) {
              this.roleList.push({
                roleId: obj.roleId,
                roleName: obj.roleName
              })
            }
          })
          this.selectRoleId = res[0].roleId.toString()
        }
      })
    },
    // 获得全部菜单
    getAllMenuList: function () {
      let url = this.$base.getUrl('getMenuByRoleId')
      let params = {
        url: url,
        data: {
          'roleId': null
        }
      }
      this.$store.dispatch('postForm', params).then(res => {
        if (res) {
          this.selectedRoleMenu = []
          res.result.forEach((obj, index) => {
            this.allMenuList.push({
              key: obj.menuId,
              label: obj.name
            })
          })
        }
      })
    },
    // 获得指定角色的菜单
    getRoleMenuIds: function (roleId) {
      let url = this.$base.getUrl('getMenuByRoleId')
      let params = {
        url: url,
        data: {
          'roleId': roleId
        }
      }
      this.$store.dispatch('postForm', params).then(res => {
        if (res) {
          this.roleMenuIds = []
          res.result.forEach((obj, index) => {
            this.roleMenuIds.push(obj.menuId)
          })
        }
      })
    },
    // 变更角色
    roleChangeHandler: function () {
      this.getRoleMenuIds(this.selectRoleId)
    },
    // 保存指定角色的菜单
    saveMenu: function () {
      this.$confirm('确定保存？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _this = this
        let url = _this.$base.getUrl('saveMenuByRoleId')
        let params = {
          url: url,
          data: {
            'roleId': _this.selectRoleId,
            'menuList': _this.roleMenuIds
          }
        }
        _this.$store.dispatch('postForm', params).then(res => {
          if (res.code === 0) {
            _this.$message({
              type: 'success',
              message: '保存成功！'
            })
            _this.$route.push({
              name: 'deviceSearch'
            })
          } else {
            _this.$message({
              type: 'danger',
              message: res.msg
            })
          }
        })
      })
    }
  },
  mounted () {
    this.getRoleList()
    this.getAllMenuList()
    this.getRoleMenuIds(this.selectRoleId)
  }
}
</script>

<style scoped>
    /deep/ .el-tabs__item {
        color: #fff
    }

    /deep/ .el-tabs__item.is-active {
        color: #409EFF;
    }

    /deep/ .el-transfer {
        height: 600px;
    }

    /deep/ .el-transfer-panel {
        height: 100%;
        background-color: transparent;
        width: 300px;
        border-color: #666;
    }

    /deep/ .el-transfer-panel .el-transfer-panel__header {
        background-color: transparent;
        border-bottom: 1px solid #666;
    }

    /deep/ .el-transfer-panel .el-transfer-panel__footer {
        background-color: transparent;
        text-align: center;
        border-top: 1px solid #666;
    }

    /deep/ .el-transfer-panel__list {
        height: 100%;
    }

    /deep/ .el-transfer-panel__body {
        height: 100%;
        background-color: transparent;
    }

    /deep/ .el-transfer-panel__item.el-checkbox .el-checkbox__label {
        color: #fff;
    }

    /deep/ .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
        color: #fff;
    }

    transfer-style /deep/ .el-button--mini, .el-button--small {
        border-color: #409EFF;
        color: #fff;
        background-color: #409EFF;
    }

    .transfer-style /deep/ .is-disabled .el-icon-arrow-right:before {
        color: #c0c4cc !important;
    }

    .transfer-style /deep/ .el-icon-arrow-right:before {
        color: #fff;
    }

</style>
